<template>
    <div style="background: #fff; height:100%;">
        <div class="wrapper">
            <input id='start' 
                type="text" class='input' readonly="" name='start' @click='openPicker("start")' 
                v-model='startDate'>-
            <input id='end' type="text" class='input' readonly="" name='end' @click='openPicker("end")' v-model='endDate'> 
            <mt-datetime-picker
                ref = "picker"
                type = "date"
                @confirm = 'handleConfirm'
            >
            </mt-datetime-picker>
        </div>
    </div>
</template>

<script>
export default {
    name: 'date',
    components: {},
    props: ['start', 'end'],
    data() {
        return {
            startDate: this.start,
            endDate: this.end,
            type: ''
        }
    },
    watch: {
        start(val) {
            this.startDate = val
        },
        end(val) {
            this.endDate = val
        }
    },
    computed: {},
    methods: {
        openPicker(type) {
            this.type = type
            this.$refs.picker.open()
        },
        handleConfirm(data) {
            this.$emit('handleConfirm', this.type, data)
        }
    },
    created() {},
    mounted() {}
}
</script>
<style>
.wrapper {
    display: flex;
    justify-content: space-around;
    height: 3rem;
    line-height: 3rem;
}
.input{
    border: none;
    border-bottom: 0.1rem solid #ccc;
    text-align: center;
    font-size: 1.4rem;
    background: none;
}
</style>